(function($) {

	$.Cronz = function(el) {
		$.Cronz.ah.add(el, 0);
	};
	
	String.prototype.repeat = function(n){
		return new Array(n + 1).join(this);
	};
	
	$.fn.cronz = function(x) {
		return this.each(function(idx){
			$.Cronz.ah.add(this, idx);
		});
	};

	$.Cronz.ah = {
		fadeSpeed: 'slow',
		mode: 24,
		closeLink: '<a href="javascript:void(0);" class="czClose">Close</a> | <a href="javascript:void(0);" class="czOK">OK</a>', // close link must have czClose class
		change: function(el,t,dir,czopts){
			var val = parseInt(el[0].value, 10);
			var newval = 1;
			var mode = czopts.mode || this.mode || 24;
			//console.log(el[0].value);
			if(t == "czHr"){
				if(this.mode == 24){
					if(dir == 'up') newval = val == 23 ? '00' : this.leading_zeros(val+1,2); 
						else newval = val == 0 ? '23' : this.leading_zeros(val-1,2);
				}else{
					if(dir == 'up') newval = val == 12 ? 1 : val+1; 
						else newval = val == 0 ? 12 : val-1;
				}
			}else{
				if(dir == 'up') newval = val == 59 ? '00' : this.leading_zeros(val+1,2);
					else newval = val == 0 ? '59' : this.leading_zeros(val-1,2);
			}
			//console.log(newval);
			el[0].value = this.leading_zeros(newval,2);
		},
		leading_zeros: function(n, total_digits){
				n = n.toString();
				return '0'.repeat(total_digits - n.length) + n;
			},
		add: function(el, idx, czopts){
			var cz = this;
			var czopts = czopts || {};
			var czTime = [{name:'czHr', display:true, fieldNamePrfx:'hr'}, {name:'czMin', display:true, fieldNamePrfx:'min'}, {name:'czSec', display:true, fieldNamePrfx:'sec'}];
			var upImg = czopts.upImg || this.upImg || '/images/upimg.gif';
			var downImg = czopts.downImg || this.downImg || '/images/downimg.gif';
			$(el)
				.addClass('czInput')
				.after('<div class="czContainer" id="cz' + idx +'"></div>')
				.attr('id','czInput' + idx);
			//console.log($(el));
			$('#cz' + idx).append(cz.closeLink); // add close link to container
			$(czTime).each(function(){
				//console.log($(this)[0].name);
				if($(this)[0].name){
					$('#cz' + idx)
						.append('<input type="text" name="' + $(this)[0].fieldNamePrfx + '" id="' + $(this)[0].name + idx + '" class="' + $(this)[0].name + '" value="00" />')
						.append('<img src="' + upImg + '" id="' + $(this)[0].name + 'Up' + idx + '" alt="Up" />')
						.append('<img src="' + downImg + '" id="' + $(this)[0].name + 'Down' + idx + '" alt="Down" />')
						.append('<div id="czSlide'  + $(this)[0].name + idx + '" class="ui-slider-1"><div class="ui-slider-handle"></div>');
					$('#czSlide' + $(this)[0].name + idx).slider();
					var t = this;
					$('#' + $(this)[0].name + 'Up' + idx).click(function(){
						cz.change($('#' + $(t)[0].name + idx), $(t)[0].name, 'up', czopts);
					});
					$('#' + $(this)[0].name + 'Down' + idx).click(function(){
						cz.change($('#' + $(t)[0].name + idx), $(t)[0].name, 'down', czopts);
					});
				}
			});
			$(el).click(function(){ // show time box
				$('#cz' + idx).fadeIn(cz.fadeSpeed, function(){
					$('#czSlide' + $(this)[0].name + idx).slider();
				});
				thisel = this;
				$('.czClose').click(function(){ // close link clicked
					$(this).parent().fadeOut(cz.fadeSpeed);
				});
				$('.czOK').unbind('click');
				$('.czOK').click(function(){ // ok link clicked
					$(thisel).val($('#czHr' + idx).val() + ':' + $('#czMin' + idx).val() + ':' + $('#czSec' + idx).val());
					$(this).parent().fadeOut(cz.fadeSpeed);
				});
			});
		}
	}

})(jQuery);